<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>成绩 - 课堂问答</title>
    <!-- Bootstrap -->
<!--<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">-->
<!--你自己的样式文件 -->
<link rel="stylesheet" type="text/css" href="/root/mynet/5/quizzhku/1/Public/Css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/root/mynet/5/quizzhku/1/Public/Css/base.css" />
<link rel="stylesheet" type="text/css" href="/root/mynet/5/quizzhku/1/Public/Css/fullpage.css" />
<link rel="stylesheet" type="text/css" href="/root/mynet/5/quizzhku/1/Public/Css/font-awesome.min.css" />
<!-- <link rel="stylesheet" type="text/css" href="/root/mynet/5/quizzhku/1/Public/Css/login.css" /> -->
<!-- <link href="css/your-style.css" rel="stylesheet">      -->   
<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<!--<script src="http://cdn.bootcss.com/jquery/2.0.0/jquery.js"></script>-->
<script type="text/javascript" src="/root/mynet/5/quizzhku/1/Public/Js/jquery.min.js"></script>
<script type="text/javascript" src="/root/mynet/5/quizzhku/1/Public/Js/fullpage.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script type="text/javascript" src="/root/mynet/5/quizzhku/1/Public/Js/bootstrap.min.js"></script>
<script type="text/javascript" src="/root/mynet/5/quizzhku/1/Public/Js/base.js"></script>
<script type="text/javascript" src="/root/mynet/5/quizzhku/1/Public/Js/md5.js"></script>
<script type="text/javascript" src="/root/mynet/5/quizzhku/1/Public/Js/vue.js"></script>
<script type="text/javascript" src="/root/mynet/5/quizzhku/1/Public/Js/Chart.min.js"></script>
    
	<link rel="stylesheet" type="text/css" href="/root/mynet/5/quizzhku/1/Public/Css/course.css" />
	<link rel="stylesheet" type="text/css" href="/root/mynet/5/quizzhku/1/Public/Css/grade.css" />
	<link rel="stylesheet" type="text/css" href="/root/mynet/5/quizzhku/1/Public/Css/header.css" />

</head>
<body>
    
	<div id="title">
    <img/>
    <div class="dropdown" id="dropdown">
        <a href="##" data-toggle="dropdown" class="dropdown-toggle">
            <?php echo (session('name')); ?><span class="caret"></span>
        </a>
        <ul class="dropdown-menu pull-right">
            <li ><a href="/root/mynet/5/quizzhku/1/index.php/Home/TeaSettings/info"><span class="glyphicon glyphicon-user"></span> 个人设置</a></li>
            <li class="divider"></li>
            <li ><a href="/root/mynet/5/quizzhku/1/index.php/Home/Auth/logout"><span class="glyphicon glyphicon-log-out"></span> 安全退出</a></li>
        </ul>
    </div>
    <div class="classInfo">
        <h1><?php echo ($classInfo["cla_name"]); ?> - <?php echo ($classInfo["cou_name"]); ?></h1>
        <p>使用以下邀请码邀请学生加课</p>
        <p><?php echo ($classInfo["cla_code"]); ?></p>
        <input type="hidden" id="cla_id" value="<?php echo ($classInfo["cla_id"]); ?>"/>
    </div>
</div>
<div class="navbar navbar-inverse">
    <div class="row">
        <div class="navbar-header col-md-4 ">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="/root/mynet/5/quizzhku/1/index.php/Home/TeaClass/classes" class="navbar-brand left">
                <i class="fa fa-long-arrow-left"></i>
                课堂
            </a>
        </div>
        <div class="collapse navbar-collapse navbar-responsive-collapse">
            <div class="col-md-4 ">
                <ul class="nav navbar-nav nav-class">
                    <li <?php if(grade == quiz): ?>class="active"<?php endif; ?>><a href="/root/mynet/5/quizzhku/1/index.php/Home/TeaQuiz/quiz?cad=<?php echo ($classInfo["cla_id"]); ?>">测试</a></li>
                    <li <?php if(grade == student): ?>class="active"<?php endif; ?>><a href="/root/mynet/5/quizzhku/1/index.php/Home/TeaClass/classStuInfo?cad=<?php echo ($classInfo["cla_id"]); ?>">成员</a></li>
                    <li <?php if(grade == grade): ?>class="active"<?php endif; ?>><a href="/root/mynet/5/quizzhku/1/index.php/Home/QuizResult/grade?cad=<?php echo ($classInfo["cla_id"]); ?>">成绩</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

    
	<div class="alert alert-danger hidden" role="alert"></div>
	<div class="alert alert-success hidden" role="alert"></div>
	<div class="loading">
		<i class="fa fa-spinner fa-spin fa-3x"></i>
	</div>
	<div class="container" id="grade-container">
		<div class="row">
			<div class="col-md-2 col-md-offset-1">
				<button class="btn btn-info" v-on:click="exportGrades">导出成绩表</button>
			</div>
			<div class="col-md-2 col-md-offset-6">
				<div class="input-group input-group search-group">
					<input type="text" class="form-control" placeholder="学号 、姓名" v-model="searchContent">
	                <span class="input-group-btn">
	                    <button class="btn btn-default" type="button" v-on:click="searchStu">
							<span class="glyphicon glyphicon-search"></span>
						</button>
	                </span>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-10 col-md-offset-1">
				<div class="panel panel-default grade-panel">
					<div class="panel-heading">
						<ul class="row">
							<li class="col-xs-2 panel-title grade-item">学号</li>
							<li class="col-xs-1 panel-title grade-item">姓名</li>
							<li class="col-xs-9 panel-titles">
								<a href="javascript:;" class="go-pre" v-on:click="goPre" v-show="front > 0"><span class="glyphicon glyphicon-chevron-left"></span></a>
								<ul class="row">
									<template v-for="quiz in quizs">
										<li class="col-xs-2" v-if="$index >= front && $index <= end">
											<div v-bind:title="quiz.qus_name" class="grade-item">{{ quiz.qus_name }}</div>
											<div class="text-muted grade-item quiz-time">{{ quiz.qus_create_time.substring(5, 10) }}</div>
										</li>
									</template>
								</ul>
								<a href="javascript:;" class="go-next" v-on:click="goNext" v-show="end < quizs.length-1"><span class="glyphicon glyphicon-chevron-right"></span></a>
							</li>

						</ul>
					</div>
					<div class="panel-body">
						<ul class="row score-row" v-for="student in students">
							<li class="col-xs-2 grade-item">{{ student.stu_number }}</li>
							<li class="col-xs-1 grade-item">{{ student.stu_name }}</li>
							<li class="col-xs-9 panel-quiz-score score-li">
								<ul class="row">
									<template v-for="score in student.allResult">
										<li class="col-xs-2"  v-if="$index >= front && $index <= end">
											<div class="grade-item text-danger" v-if="score.stu_score === '未交'">{{ score.stu_score }}</div>
											<div class="grade-item" v-else>
												<a v-bind:href="'/root/mynet/5/quizzhku/1/index.php/Home/StuQuiz/quizResult/?qd='+quizs[$index].qus_id+'&sd='+student.stu_id" class="text-success" target="_blank">
													{{ score.stu_score }}
												</a>
											</div>
										</li>
									</template>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- count:课程个数 page:总页数 np:当前页数 -->
		<div class="row" v-if="pageInfo.page > 1">
			<div class="col-md-3 col-md-offset-5">
				<ul class="pagination">
					<li><a href="javascript:;" v-on:click="gotoPage(1)">&laquo;首页</a></li>
					<li v-if="pageInfo.np-1 > 0"><a href="javascript:;" v-on:click="gotoPage(pageInfo.np-1)">{{ pageInfo.np-1 }}</a></li>
					<li class="active"><a href="javasript:;">{{ pageInfo.np }}</a></li>
					<li v-if="pageInfo.np+1 <= pageInfo.page"><a href="javascript:;" v-on:click="gotoPage(pageInfo.np+1)">{{ pageInfo.np+1 }}</a></li>
					<li><a href="javascript:;" v-on:click="gotoPage(pageInfo.page)">末页&raquo;</a></li>
				</ul>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		function initVm(quizs, students, pageInfo) {
			vm = new Vue({
				el: "#grade-container",
				data: {
					searchContent: "",
					quizs: quizs,
					students: students,
					pageInfo: pageInfo,
					front: 0,
					end: 5,
				},
				methods: {
					gotoPage: function(index) {
						var cla_id = location.search.substring(1).split("=")[1];
						var that = this;
						postApi("/root/mynet/5/quizzhku/1/index.php/Home/QuizResult/getAllGrades", {cla_id: cla_id, np: index}, function(err, data) {
							if (err) {
								showError(err.message);
							} else {
								that.quizs = data.data.quizs;
								that.students = data.data.students;
								that.pageInfo = data.data.pageInfo;
								that.front = 0;
								that.end = 5;
							}
						})
					},
					searchStu: function() {
						if (!this.searchContent) {
							showError("请输入内容");
							return;
						}
						var that = this;
						var cla_id = location.search.substring(1).split("=")[1];
						postApi("/root/mynet/5/quizzhku/1/index.php/Home/QuizResult/getSomeGrades", {class_cla_id: cla_id, keyword: this.searchContent}, function(err, data) {
							if (err) {
								showError(err.message);
							} else {
								that.students = data.data;
								that.pageInfo.page = 0;
								that.front = 0;
								that.end = 5;
							}
						})
					},
					exportGrades:function(){
						var cla_id = location.search.substring(1).split("=")[1];
						window.open("/root/mynet/5/quizzhku/1/index.php/Home/ExportExcel/exportAllGrades?cad="+cla_id);
					},
					goPre: function() {
						if (this.front > 0) {
							this.front--;
							this.end--;
						}
						$(".row .col-xs-9").hide().fadeIn("slow");
					},
					goNext: function() {
						if (this.end < quizs.length-1) {
							this.front++;
							this.end++;
						}
						$(".row .col-xs-9").hide().fadeIn("slow");
					}
				},
			})
		}

		$(function() {
			//背景的设置
			var bg = $("#cla_id").val() % 5 + 1;
			$("#title img").prop("src","/root/mynet/5/quizzhku/1/Public/Images/" + bg + ".jpg");
			//班级基本信息的显示
			$(".classInfo").css("opacity","1");
			var cla_id = location.search.substring(1).split("=")[1];
			$("#grade-container").hide();
			postApi("/root/mynet/5/quizzhku/1/index.php/Home/QuizResult/getAllGrades", {cla_id: cla_id}, function(err, data) {
				if (err) {
					showError(err.message);
				} else {
					initVm(data.data.quizs, data.data.students, data.data.pageInfo);
					$("#grade-container").show();
				}
			})
		})
	</script>

</body>